/**
 * 文件上传页面
 */

import React from 'react';
import { Row, Col, Typography, Steps } from 'antd';
import styled from 'styled-components';
import { themeConfig } from '../theme/themeConfig';
import { Card } from '../components/ui/Card';
import { Button } from '../components/ui/Button';
import { FileUpload } from '../components/upload/FileUpload';
import { useUploadState } from '../store/appStore';
import { UploadFile as UploadFileType } from '../types';

const { Title, Paragraph } = Typography;
const { Step } = Steps;

const PageContainer = styled.div`
  min-height: 100vh;
  background-color: ${themeConfig.colors.background};
  padding: ${themeConfig.spacing.xl};
`;

const ContentContainer = styled.div`
  max-width: 1200px;
  margin: 0 auto;
`;

const HeaderSection = styled.div`
  text-align: center;
  margin-bottom: ${themeConfig.spacing.xxl};
`;

const MainTitle = styled(Title)`
  color: ${themeConfig.colors.text} !important;
  margin-bottom: ${themeConfig.spacing.md} !important;
`;

const SubTitle = styled(Paragraph)`
  color: ${themeConfig.colors.textSecondary} !important;
  font-size: ${themeConfig.typography.fontSize.body} !important;
  margin-bottom: 0 !important;
`;

const StepsContainer = styled.div`
  margin-bottom: ${themeConfig.spacing.xxl};
  
  .ant-steps-item-process .ant-steps-item-icon {
    background-color: ${themeConfig.colors.primary};
    border-color: ${themeConfig.colors.primary};
  }
  
  .ant-steps-item-finish .ant-steps-item-icon {
    background-color: ${themeConfig.colors.primary};
    border-color: ${themeConfig.colors.primary};
  }
`;

const UploadCard = styled(Card)`
  margin-bottom: ${themeConfig.spacing.xl};
`;

const ActionSection = styled.div`
  display: flex;
  justify-content: center;
  gap: ${themeConfig.spacing.md};
  margin-top: ${themeConfig.spacing.xl};
`;

const FeatureList = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: ${themeConfig.spacing.lg};
  margin-top: ${themeConfig.spacing.xl};
`;

const FeatureItem = styled.div`
  text-align: center;
  padding: ${themeConfig.spacing.lg};
`;

const FeatureIcon = styled.div`
  font-size: 48px;
  color: ${themeConfig.colors.primary};
  margin-bottom: ${themeConfig.spacing.md};
`;

const FeatureTitle = styled.h3`
  color: ${themeConfig.colors.text};
  margin-bottom: ${themeConfig.spacing.sm};
  font-weight: ${themeConfig.typography.fontWeight.semibold};
`;

const FeatureDescription = styled.p`
  color: ${themeConfig.colors.textSecondary};
  font-size: ${themeConfig.typography.fontSize.body};
  line-height: ${themeConfig.typography.lineHeight.body};
`;

interface UploadPageProps {
  onNext: () => void;
}

export const UploadPage: React.FC<UploadPageProps> = ({ onNext }) => {
  const { uploadFile, isUploading, setUploadFile } = useUploadState();

  const handleFileSelect = (file: UploadFileType) => {
    setUploadFile(file);
  };

  const handleNext = () => {
    if (uploadFile) {
      onNext();
    }
  };

  const handleReset = () => {
    setUploadFile(null);
  };

  return (
    <PageContainer>
      <ContentContainer>
        <HeaderSection>
          <MainTitle level={1}>
            多语言文件管理工具
          </MainTitle>
          <SubTitle>
            上传Excel文件，自动生成多语言Dart文件，智能检测翻译冲突
          </SubTitle>
        </HeaderSection>

        <StepsContainer>
          <Steps current={0} size="small">
            <Step title="上传文件" description="选择或拖拽Excel文件" />
            <Step title="处理文件" description="解析数据并检测冲突" />
            <Step title="下载结果" description="获取生成的语言文件" />
          </Steps>
        </StepsContainer>

        <Row gutter={[24, 24]}>
          <Col xs={24} lg={16}>
            <UploadCard title="文件上传" variant="elevated">
              <FileUpload
                onFileSelect={handleFileSelect}
                isUploading={isUploading}
                accept=".xlsx"
                maxSize={10}
              />
            </UploadCard>
          </Col>
          
          <Col xs={24} lg={8}>
            <Card title="使用说明" variant="outlined">
              <div style={{ fontSize: themeConfig.typography.fontSize.body, lineHeight: themeConfig.typography.lineHeight.body }}>
                <p><strong>支持格式：</strong>.xlsx Excel文件</p>
                <p><strong>文件大小：</strong>最大10MB</p>
                <p><strong>数据格式：</strong></p>
                <ul>
                  <li>第一行：语言代码（如en, zh, fr等）</li>
                  <li>第一列：翻译键名</li>
                  <li>其他单元格：对应语言的翻译内容</li>
                </ul>
                <p><strong>生成格式：</strong>符合docs/langs目录结构的Dart文件</p>
              </div>
            </Card>
          </Col>
        </Row>

        <ActionSection>
          <Button
            variant="outline"
            onClick={handleReset}
            disabled={!uploadFile}
          >
            重新选择
          </Button>
          <Button
            variant="primary"
            onClick={handleNext}
            disabled={!uploadFile}
            loading={isUploading}
          >
            开始处理
          </Button>
        </ActionSection>

        <FeatureList>
          <FeatureItem>
            <FeatureIcon>📁</FeatureIcon>
            <FeatureTitle>Excel文件解析</FeatureTitle>
            <FeatureDescription>
              自动解析Excel文件，识别语言列和翻译数据，支持多种Excel格式
            </FeatureDescription>
          </FeatureItem>
          
          <FeatureItem>
            <FeatureIcon>🔍</FeatureIcon>
            <FeatureTitle>智能冲突检测</FeatureTitle>
            <FeatureDescription>
              自动检测重复键、缺失翻译和格式错误，提供详细的检测报告
            </FeatureDescription>
          </FeatureItem>
          
          <FeatureItem>
            <FeatureIcon>📱</FeatureIcon>
            <FeatureTitle>Dart文件生成</FeatureTitle>
            <FeatureDescription>
              生成符合Flutter项目标准的Dart语言文件，可直接复制到工程使用
            </FeatureDescription>
          </FeatureItem>
        </FeatureList>
      </ContentContainer>
    </PageContainer>
  );
};
